var xjrightChart2 = echarts.init(document.getElementById('right_chart2'), 'macarons');
var app = {};
option = null;
var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
// for (var i = 1; i < 100; i++) {
//     var now = new Date(base += oneDay);
//     date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
//     data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
// }

var data = [Math.random()+32];
for (var i = 1; i < 5; i++) {
    data.push(Math.floor(Math.random()+35));
}
for (var i = 1; i < 5; i++) {
    data.push(Math.floor(Math.random()+42));
}
for (var i = 1; i < 5; i++) {
    data.push(Math.floor(Math.random()+38));
}
for (var i = 1; i < 5; i++) {
    data.push(Math.floor(Math.random()+45));
}

option = {
    // backgroundColor:'rgba(255, 255, 255, 0.9)', //设置无背景色
    tooltip: {
        trigger: 'axis',
        position: function (pt) {
            return [pt[0], '10%'];
        }
    },
    title: {
        left: 'center',
    },
    grid: {
        left: '50',
        right: '80',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
            "2018/01",
            "2018/02",
            "2018/03",
            "2018/04",
            "2018/05",
            "2018/06",
            "2018/07",
            "2018/01",
            "2018/02",
            "2018/03",
            "2018/04",
            "2018/05",
            "2018/06",
            "2018/07",
            "2018/01",
            "2018/02"
        ],
        axisLabel:{
            show:true,
            textStyle: {
                color: '#fff',
                fontSize:40
            }

        },
        axisLine:{
            lineStyle:{
                color: '#56f0ed',
                width:5
            }
        }
    },
    yAxis: {
        name:"帧",
        nameTextStyle:{
            color:"#fff",
            fontSize:40
        },
        type: 'value',
        min:0,
        max:100,
        interval:10,
        axisLabel: {
            show: true,
            // interval: 'auto',
            // formatter: '{value}%',
            // position: 'left',
            // nameLocation: 'middle',
            // nameGap: 35,
            textStyle: {
                color: '#fff',
                fontSize:40
            }
        },
        show: true,
        splitLine:{
            show:false
        },
        axisLine:{
            lineStyle:{
                color: '#56f0ed',
                width:5
            }
        }
    },
    // dataZoom: [
    //     {
    //     start: 0,
    //     end: 20,
    //     // handleIcon: '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30',
    //     handleSize: '80%',
    //     handleStyle: {
    //         color: '#fff',
    //         shadowBlur: 3,
    //         shadowColor: 'rgba(0, 0, 0, 0.6)',
    //         shadowOffsetX: 2,
    //         shadowOffsetY: 2
    //     }
    // }],
    series: [
        {
            name:'时间（天）',
            type:'line',
            smooth:true,
            symbol: 'none',
            sampling: 'average',
            lineStyle:{
                width:10
            },
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 1,
                    color: '#3fb2fe'
                }, {
                    offset: 0,
                    color: '#6f1dff'
                }])
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 1,
                    color: 'rgb(63,178,254,0.9)'
                }, {
                    offset: 0,
                    color: 'rgb(111,29,255,0)'
                }])
            },
            data:data
        }
    ]
};

if (option && typeof option === "object") {
    xjrightChart2.setOption(option, true);
    window.onresize = function() {
        if(xjrightChart2){
            xjrightChart2.resize();
        }
    }
}
setInterval(function() {
    var op = xjrightChart2.getOption();
    var data0 = op.series[0].data;


    op.series[0].data.push(data0.shift());

    // var data2 = op.series[0].data;
    // op.xAxis[0].data.shift();
    // op.xAxis[0].data.push(xAxisdata2);
    // console.log(data0,data1,data2);
    xjrightChart2.setOption(op);

    // myChart.setOption({
    //       xAxis: {
    //           data: xAxisdata2
    //       },
    //       series: [{
    //           data: seriesdata2[0]
    //       },{
    //         data:seriesdata2[1]
    //       }]
    //   });
}, 5000);

// // 基于准备好的dom，初始化echarts实例
//     var btmChart = echarts.init(document.getElementById('bottom_chart'), 'macarons');
//     var leftChart2 = echarts.init(document.getElementById('left_chart2'), 'macarons');
//     var rightChart1 = echarts.init(document.getElementById('right_chart1'), 'macarons');
//     var rightChart2 = echarts.init(document.getElementById('right_chart2'), 'macarons');
//
// // 指定图表的配置项和数据
//     var btmoption = {
//         title: {
//             text: '折线图堆叠'
//         },
//         tooltip: {
//             trigger: 'axis'
//         },
//         legend: {
//             data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
//         },
//         grid: {
//             left: '3%',
//             right: '4%',
//             bottom: '3%',
//             containLabel: true
//         },
//         toolbox: {
//             feature: {
//                 saveAsImage: {}
//             }
//         },
//         xAxis: {
//             type: 'category',
//             boundaryGap: false,
//             data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
//         },
//         yAxis: {
//             type: 'value'
//         },
//         series: [
//             {
//                 name: '邮件营销',
//                 type: 'line',
//                 stack: '总量',
//                 data: [120, 132, 101, 134, 90, 230, 210]
//             },
//             {
//                 name: '联盟广告',
//                 type: 'line',
//                 stack: '总量',
//                 data: [220, 182, 191, 234, 290, 330, 310]
//             },
//             {
//                 name: '视频广告',
//                 type: 'line',
//                 stack: '总量',
//                 data: [150, 232, 201, 154, 190, 330, 410]
//             },
//             {
//                 name: '直接访问',
//                 type: 'line',
//                 stack: '总量',
//                 data: [320, 332, 301, 334, 390, 330, 320]
//             },
//             {
//                 name: '搜索引擎',
//                 type: 'line',
//                 stack: '总量',
//                 data: [820, 932, 901, 934, 1290, 1330, 1320]
//             }
//         ]
//     };
//     var leftoption1 = {
//         title: {
//             text: '折线图堆叠'
//         },
//         tooltip: {
//             trigger: 'axis'
//         },
//         legend: {
//             data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
//         },
//         grid: {
//             left: '3%',
//             right: '4%',
//             bottom: '3%',
//             containLabel: true
//         },
//         toolbox: {
//             feature: {
//                 saveAsImage: {}
//             }
//         },
//         xAxis: {
//             type: 'category',
//             boundaryGap: false,
//             data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
//         },
//         yAxis: {
//             type: 'value'
//         },
//         series: [
//             {
//                 name: '邮件营销',
//                 type: 'line',
//                 stack: '总量',
//                 data: [120, 132, 101, 134, 90, 230, 210]
//             },
//             {
//                 name: '联盟广告',
//                 type: 'line',
//                 stack: '总量',
//                 data: [220, 182, 191, 234, 290, 330, 310]
//             },
//             {
//                 name: '视频广告',
//                 type: 'line',
//                 stack: '总量',
//                 data: [150, 232, 201, 154, 190, 330, 410]
//             },
//             {
//                 name: '直接访问',
//                 type: 'line',
//                 stack: '总量',
//                 data: [320, 332, 301, 334, 390, 330, 320]
//             },
//             {
//                 name: '搜索引擎',
//                 type: 'line',
//                 stack: '总量',
//                 data: [820, 932, 901, 934, 1290, 1330, 1320]
//             }
//         ]
//     };
//     var leftoption2 = {
//         title: {
//             text: '折线图堆叠'
//         },
//         tooltip: {
//             trigger: 'axis'
//         },
//         legend: {
//             data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
//         },
//         grid: {
//             left: '3%',
//             right: '4%',
//             bottom: '3%',
//             containLabel: true
//         },
//         toolbox: {
//             feature: {
//                 saveAsImage: {}
//             }
//         },
//         xAxis: {
//             type: 'category',
//             boundaryGap: false,
//             data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
//         },
//         yAxis: {
//             type: 'value'
//         },
//         series: [
//             {
//                 name: '邮件营销',
//                 type: 'line',
//                 stack: '总量',
//                 data: [120, 132, 101, 134, 90, 230, 210]
//             },
//             {
//                 name: '联盟广告',
//                 type: 'line',
//                 stack: '总量',
//                 data: [220, 182, 191, 234, 290, 330, 310]
//             },
//             {
//                 name: '视频广告',
//                 type: 'line',
//                 stack: '总量',
//                 data: [150, 232, 201, 154, 190, 330, 410]
//             },
//             {
//                 name: '直接访问',
//                 type: 'line',
//                 stack: '总量',
//                 data: [320, 332, 301, 334, 390, 330, 320]
//             },
//             {
//                 name: '搜索引擎',
//                 type: 'line',
//                 stack: '总量',
//                 data: [820, 932, 901, 934, 1290, 1330, 1320]
//             }
//         ]
//     };
//
//     var rightoption1 = {
//         title: {
//             text: '堆叠区域图'
//         },
//         tooltip: {
//             trigger: 'axis',
//             axisPointer: {
//                 type: 'cross',
//                 label: {
//                     backgroundColor: '#6a7985'
//                 }
//             }
//         },
//         legend: {
//             data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
//         },
//         toolbox: {
//             feature: {
//                 saveAsImage: {}
//             }
//         },
//         grid: {
//             left: '3%',
//             right: '4%',
//             bottom: '3%',
//             containLabel: true
//         },
//         xAxis: [
//             {
//                 type: 'category',
//                 boundaryGap: false,
//                 data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
//             }
//         ],
//         yAxis: [
//             {
//                 type: 'value'
//             }
//         ],
//         series: [
//             {
//                 name: '邮件营销',
//                 type: 'line',
//                 stack: '总量',
//                 areaStyle: {},
//                 data: [120, 132, 101, 134, 90, 230, 210]
//             },
//             {
//                 name: '联盟广告',
//                 type: 'line',
//                 stack: '总量',
//                 areaStyle: {},
//                 data: [220, 182, 191, 234, 290, 330, 310]
//             },
//             {
//                 name: '视频广告',
//                 type: 'line',
//                 stack: '总量',
//                 areaStyle: {},
//                 data: [150, 232, 201, 154, 190, 330, 410]
//             },
//             {
//                 name: '直接访问',
//                 type: 'line',
//                 stack: '总量',
//                 areaStyle: {normal: {}},
//                 data: [320, 332, 301, 334, 390, 330, 320]
//             },
//             {
//                 name: '搜索引擎',
//                 type: 'line',
//                 stack: '总量',
//                 label: {
//                     normal: {
//                         show: true,
//                         position: 'top'
//                     }
//                 },
//                 areaStyle: {normal: {}},
//                 data: [820, 932, 901, 934, 1290, 1330, 1320]
//             }
//         ]
//     };
//     var rightoption2 = {
//         title: {
//             text: '堆叠区域图'
//         },
//         tooltip: {
//             trigger: 'axis',
//             axisPointer: {
//                 type: 'cross',
//                 label: {
//                     backgroundColor: '#6a7985'
//                 }
//             }
//         },
//         legend: {
//             data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
//         },
//         toolbox: {
//             feature: {
//                 saveAsImage: {}
//             }
//         },
//         grid: {
//             left: '3%',
//             right: '4%',
//             bottom: '3%',
//             containLabel: true
//         },
//         xAxis: [
//             {
//                 type: 'category',
//                 boundaryGap: false,
//                 data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
//             }
//         ],
//         yAxis: [
//             {
//                 type: 'value'
//             }
//         ],
//         series: [
//             {
//                 name: '邮件营销',
//                 type: 'line',
//                 stack: '总量',
//                 areaStyle: {},
//                 data: [120, 132, 101, 134, 90, 230, 210]
//             },
//             {
//                 name: '联盟广告',
//                 type: 'line',
//                 stack: '总量',
//                 areaStyle: {},
//                 data: [220, 182, 191, 234, 290, 330, 310]
//             },
//             {
//                 name: '视频广告',
//                 type: 'line',
//                 stack: '总量',
//                 areaStyle: {},
//                 data: [150, 232, 201, 154, 190, 330, 410]
//             },
//             {
//                 name: '直接访问',
//                 type: 'line',
//                 stack: '总量',
//                 areaStyle: {normal: {}},
//                 data: [320, 332, 301, 334, 390, 330, 320]
//             },
//             {
//                 name: '搜索引擎',
//                 type: 'line',
//                 stack: '总量',
//                 label: {
//                     normal: {
//                         show: true,
//                         position: 'top'
//                     }
//                 },
//                 areaStyle: {normal: {}},
//                 data: [820, 932, 901, 934, 1290, 1330, 1320]
//             }
//         ]
//     };
//
//
// // 使用刚指定的配置项和数据显示图表。
//     btmChart.setOption(btmoption);
//     leftChart2.setOption(leftoption2);
//     rightChart1.setOption(rightoption1);
//     rightChart2.setOption(rightoption2);
//
